<template>
  <div
    style="position: relative"
    :style="{ backgroundImage: 'url(' + joinPlanebg + ')' }"
  >
    <headerNav />
    <div
      class="section main"
      :style="{ backgroundImage: 'url(' + joinPlanebg + ')' }"
    >
      <div class="mainitem">
        <div
          class="text_bg"
          @click="onlogin"
          :style="{ backgroundImage: 'url(' + joinPlanetext01 + ')' }"
        >
          <div class="text_bgdiv">来此生活</div>
        </div>
        <div
          class="text_bg"
          :style="{ backgroundImage: 'url(' + joinPlanetext02 + ')' }"
        >
          <div class="text_bgdiv01">来此工作</div>
          <div class="text_bgdiv02" style="margin-top: 10px">
            如果您是工程师，您可以来此一起建设快乐星球;
          </div>
          <div class="text_bgdiv02">
            如果您是建筑师，您可以来此一起建设快乐星球;
          </div>
          <div class="text_bgdiv02">
            如果您是设计师，您可以来此一起建设快乐星球;
          </div>
          <div class="text_bgdiv02">.......................</div>
          <div class="text_bgdiv02">
            无论您是做什么的，您都可以来此一起建设快乐星球，因为这是一个完全虚拟现实的世界。当然，您的付出也会得到相应的回报。因为我们是一个共建丶共治丶共享的星球。
          </div>
        </div>
        <div
          class="text_bg"
          :style="{ backgroundImage: 'url(' + joinPlanetext03 + ')' }"
        >
          <div class="text_bgdiv01">来此创业</div>
          <div class="text_bgdiv02" style="margin-top: 10px">
            如果您是创业者，欢迎您来此创业，这里注册公司和现实中类似，比现实中更加简单，365天24小时无休，注册流程简单，没有任何限制。凡是不影响他人利益的，凡是能为他人创造价值，为星球创造价值的，我们都欢迎。只要您注册的企业名称和已有的企业名字不重复即可使用。
          </div>
        </div>
      </div>

      <div class="mainphone">
        <div
          class="text_bg"
          @click="onlogin"
          :style="{ backgroundImage: 'url(' + joinPlanetext01 + ')' }"
        >
          <div class="text_bgdiv">来此生活</div>
        </div>
        <div
          class="text_bg"
          :style="{ backgroundImage: 'url(' + joinPlanetext02 + ')' }"
        >
          <div class="text_bgdiv01">来此工作</div>
          <div class="text_bgdiv02" style="margin-top: 10px">
            如果您是工程师，您可以来此一起建设快乐星球;
          </div>
          <div class="text_bgdiv02">
            如果您是建筑师，您可以来此一起建设快乐星球;
          </div>
          <div class="text_bgdiv02">
            如果您是设计师，您可以来此一起建设快乐星球;
          </div>
          <div class="text_bgdiv02">.......................</div>
          <div class="text_bgdiv02">
            无论您是做什么的，您都可以来此一起建设快乐星球，因为这是一个完全虚拟现实的世界。当然，您的付出也会得到相应的回报。因为我们是一个共建丶共治丶共享的星球。
          </div>
        </div>
        <div
          class="text_bg"
          :style="{ backgroundImage: 'url(' + joinPlanetext03 + ')' }"
        >
          <div class="text_bgdiv01">来此创业</div>
          <div class="text_bgdiv02" style="margin-top: 10px">
            如果您是创业者，欢迎您来此创业，这里注册公司和现实中类似，比现实中更加简单，365天24小时无休，注册流程简单，没有任何限制。凡是不影响他人利益的，凡是能为他人创造价值，为星球创造价值的，我们都欢迎。只要您注册的企业名称和已有的企业名字不重复即可使用。
          </div>
        </div>
      </div>

      <div class="fotertext">
        加入星球前需签署协议。宣誓效忠于《快乐星球宪法》<span
          style="
            background: linear-gradient(to right, #3a8ee6, #67c23a) text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          "
          >【此参考美国政治制度及国际治理，并在此基础上再加完善】;</span
        >
      </div>
    </div>
    <div v-if="contextMenuVisible" class="clickMenu">
      <div style="width: 45%; height: 100%">
        <el-carousel style="height: 100%; width: 100%" :autoplay="false">
          <el-carousel-item v-for="(item, index) in imglist" :key="index">
            <div
              class="imgbg"
              :style="{ backgroundImage: 'url(' + item.img + ')' }"
            ></div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="width: 55%; padding: 50px 30px">
        <div class="iconclass" @click="handleClose">
          <i class="el-icon-close"></i>
        </div>
        <div class="logintext01">
          登录<span style="font-weight: 700">快乐星球</span>
        </div>
        <div class="logintext02" @click="changetype('login')">
          没有快乐星球ID？去注册
        </div>
        <div class="logintext03 active">邮箱登录</div>
        <div style="margin-top: 25px">
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="50px"
            class="demo-ruleForm"
          >
            <el-form-item label="邮箱">
              <el-input
                :rules="[
                  {
                    required: true,
                    message: '请输入邮箱地址',
                    trigger: 'blur',
                  },
                  {
                    type: 'email',
                    message: '请输入正确的邮箱地址',
                    trigger: ['blur', 'change'],
                  },
                ]"
                v-model="ruleForm.emial"
                autocomplete="off"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
                show-password
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            display: flex;
            margin-top: 50px;
            justify-content: space-between;
          "
        >
          <div style="display: flex">
            <el-checkbox v-model="ruleForm.checked"></el-checkbox>
            <div class="checkedc">记住密码</div>
          </div>
          <div class="logintext04">没有收到激活邮件？ 忘记密码</div>
        </div>
        <div class="bottonclass" style="margin-top: 48px">登录</div>
      </div>
    </div>
    <div v-if="contextMenuVisibleregister" class="clickMenure">
      <div style="width: 45%; height: 100%">
        <el-carousel style="height: 100%; width: 100%" :autoplay="false">
          <el-carousel-item v-for="(item, index) in imglist" :key="index">
            <div
              class="imgbg"
              :style="{ backgroundImage: 'url(' + item.img + ')' }"
            ></div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="width: 55%; padding: 50px 30px">
        <div class="iconclass" @click="handleClose">
          <i class="el-icon-close"></i>
        </div>
        <div class="logintext01">
          加入<span style="font-weight: 700">快乐星球</span>
        </div>
        <div style="margin-top: 25px">
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="60px"
            class="demo-ruleForm"
          >
            <el-form-item label="邮箱">
              <el-input
                :rules="[
                  {
                    required: true,
                    message: '请输入邮箱地址',
                    trigger: 'blur',
                  },
                  {
                    type: 'email',
                    message: '请输入正确的邮箱地址',
                    trigger: ['blur', 'change'],
                  },
                ]"
                v-model="ruleForm.emial"
                autocomplete="off"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
                show-password
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div></div>
        <div class="bottonclass" style="margin-top: 24px">注册</div>
      </div>
    </div>
    <div
      v-if="contextMenuVisibleregisterPhone"
      class="clickMenure"
      style="
        width: auto;
        /* margin-left: 0px; */
        position: fixed;
        left: 13%;
        margin: 0 auto;
        top: 10%;
      "
    >
      <div style="width: 300px; padding: 50px 30px">
        <div class="iconclass" @click="handleClose">
          <i class="el-icon-close"></i>
        </div>
        <div class="logintext01">
          加入<span style="font-weight: 700">快乐星球</span>
        </div>
        <div style="margin-top: 25px">
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="60px"
            class="demo-ruleForm"
          >
            <el-form-item label="邮箱">
              <el-input
                :rules="[
                  {
                    required: true,
                    message: '请输入邮箱地址',
                    trigger: 'blur',
                  },
                  {
                    type: 'email',
                    message: '请输入正确的邮箱地址',
                    trigger: ['blur', 'change'],
                  },
                ]"
                v-model="ruleForm.emial"
                autocomplete="off"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
                show-password
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div></div>
        <div class="bottonclass" style="margin-top: 24px">注册</div>
      </div>
    </div>
  </div>
</template>

<script>
import headerNav from "./headerNav.vue";
export default {
  components: {
    headerNav,
  },
  data() {
    return {
      screenWidth: "",
      ruleForm: {
        emial: "",
        pass: "",
        uname: "",
        name: "",
        checked: false,
        checked01: false,
        checked02: false,
        checked03: false,
        checked04: false,
        checked05: false,
      },
      imglist: [
        {
          img: require("@/assets/img/切图_03.png"),
        },
        {
          img: require("@/assets/img/下载星球-来此生活.png"),
        },
        {
          img: require("@/assets/img/切图_03.png"),
        },
      ],
      contextMenuVisible: false,
      contextMenuVisibleregister: false,
      contextMenuVisibleregisterPhone: false,
      joinPlanebg: require("@/assets/img/加入星球bg.png"),
      joinPlanetext01: require("@/assets/img/下载星球-来此生活.png"),
      joinPlanetext02: require("@/assets/img/下载星球-来此工作.png"),
      joinPlanetext03: require("@/assets/img/下载星球-来此创业.png"),
    };
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;

    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  watch: {
    screenWidth: {
      handler: function (val) {
        if (val < 576) {
          console.log(val + "屏幕宽度小于576px");
        } else {
          console.log(val + "屏幕宽度大于576px");
        }
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    onlogin() {
      if (this.screenWidth < 576) {
        this.contextMenuVisibleregisterPhone = true;
      } else {
        this.contextMenuVisibleregister = true;
      }
    },
    handleClose() {
      this.contextMenuVisibleregister = false;
      this.contextMenuVisibleregisterPhone = false;
    },
    changetype(val) {
      if (val == "login") {
        this.contextMenuVisible = false;
        if (this.screenWidth < 576) {
          this.contextMenuVisibleregisterPhone = true;
        } else {
          this.contextMenuVisibleregister = true;
        }
      } else {
        this.contextMenuVisibleregister = false;
        this.contextMenuVisibleregisterPhone = false;
        this.contextMenuVisible = true;
      }
    },
  },
};
</script>
<style scoped>
</style>
<style lang="less" scoped>
.section {
  height: 100vh;
  background-position-y: -70px;
  background-size: 100% 106%;
  background-repeat: no-repeat;
  touch-action: none;
  transform: translate3d(0px, 0px, 0px);
  transition: transform 700ms ease 0s;
  background-position: center;
}
.imgbg {
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  touch-action: none;
}
.iconclass {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #b0b0b0;
}
.logintext01 {
  color: #0b283f;
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  line-height: 40px;
  text-decoration: none;
  text-transform: none;
}
.logintext02 {
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 22px;
  text-decoration: none;
  text-transform: none;
  color: #2196f3;
}
.logintext03 {
  margin-top: 48px;
  color: #243b4d;
  font-size: 16px;
  width: 68px;
  line-height: 30px;
  border-bottom: 2px solid transparent;
  -o-border-image: linear-gradient(
    90deg,
    #2196f3 -7.57%,
    #2196f3 -7.56%,
    #a5fecb 103.63%
  );
  border-image: linear-gradient(
    90deg,
    #2196f3 -7.57%,
    #2196f3 -7.56%,
    #a5fecb 103.63%
  );
  border-image-slice: 1;
}
.logintext04 {
  color: #2196f3;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 22px;
  text-decoration: none;
  text-transform: none;
}
.bottonclass {
  background: var(
    --Linear,
    linear-gradient(90deg, #2196f3 -7.57%, #2196f3 -7.56%, #a5fecb 103.63%)
  );
  color: white;
  display: flex;
  height: 36px;
  padding: 5px 24px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 16px;
  border-width: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  line-height: 22px;
  text-decoration: none;
  text-transform: none;
}
.retext01 {
  display: flex;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 18px;
  text-decoration: none;
  text-transform: capitalize;
}
.clickMenu {
  position: fixed;
  z-index: 9999;
  width: 750px;
  height: 540px;
  margin-top: -270px;
  margin-left: -325px;
  background-color: rgba(255, 255, 255);
  border-radius: 8px;
  display: flex;
  left: 50%;
  top: 50%;
  font-size: 14px;
}
.clickMenure {
  position: fixed;
  z-index: 9999;
  width: 750px;
  height: 570px;
  margin-top: -270px;
  margin-left: -335px;
  background-color: rgba(255, 255, 255);
  border-radius: 8px;
  display: flex;
  left: 50%;
  top: 50%;
  font-size: 14px;
}
.checkedc {
  margin-left: 10px;
}
.headertext {
  color: #fff;
  font-size: 30px;
  padding-top: 150px;
  padding-left: 150px;
}
.mainitem {
  // padding-top: 50px;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  // margin-left: 50px;
  // padding: 0 6%;
  // margin-top: 30px;
}
.text_bg {
  color: #fff;
  width: 100%;
  // height: 600px;
  background-size: 100% 100%;
}
.text_bgdiv {
  font-weight: 700;
  display: flex;
  font-size: 34px;
  color: #90c7ff;
  height: 600px;
  flex-direction: column-reverse;
  justify-content: center;
  text-align: center;
}
.text_bgdiv01 {
  font-weight: 700;
  font-size: 34px;
  color: #90c7ff;
  margin-top: 50px;
  text-align: center;
}
.text_bgdiv02 {
  font-size: 18px;
  line-height: 34px;
  padding: 0 40px;
  color: #90c7ff;
}
.fotertext {
  color: #c7c8c9;
  margin-top: 20px;
  font-size: 18px;
  line-height: 45px;
  margin-left: 10%;
  padding-bottom: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.mainphone {
  display: none;
}
@media (max-width: 992px) {
  .mainitem {
    display: none;
  }
  .mainphone {
    display: block;
  }

  .text_bgdiv {
    height: unset !important;
    padding: 100px 0;
  }

  .fotertext {
    margin-left: 0 !important;
    padding: 0 40px;
    position: unset;
  }
}

@media (max-width: 576px) {
  .main {
    background-size: cover !important;
  }
  .mainitem {
    display: none;
  }
  .mainphone {
    display: block;
  }

  .section {
    overflow: hidden;
    overflow-y: auto;
    background-size: cover;
  }

  .text_bg {
    padding-bottom: 20px;
    &:nth-child(1) {
      margin-top: 60px;
    }
  }

  .text_bgdiv {
    height: unset !important;
    padding: 100px 0;
  }

  .fotertext {
    margin-left: 0 !important;
    padding: 0 20px;
    position: unset;
  }
}
</style>
